<template>
  <a-descriptions
    :title="title"
    :size="size"
    :layout="layout"
    :label-style="labelStyle"
    :column="column"
    :content-style="contentStyle"
    :colon="colon"
    :extra="extra"
    :bordered="bordered"
  >
    <slot />
    <template v-if="$slots.extra" #extra>
      <slot name="extra" />
    </template>
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>
  </a-descriptions>
</template>

<script>
import { defineComponent } from 'vue'
import { Descriptions } from 'ant-design-vue'

export default defineComponent({
  name: 'ZDescriptions',
  components: { ADescriptions: Descriptions },
  props: {
    title: {
      type: [String, Function],
      default: undefined
    },
    size: {
      type: String,
      default: 'default'
    },
    layout: {
      type: String,
      default: 'horizontal'
    },
    labelStyle: {
      type: Object,
      default: undefined
    },
    extra: {
      type: [String, Function],
      default: undefined
    },
    contentStyle: {
      type: Object,
      default: undefined
    },
    column: {
      type: [Number, Object],
      default: 3
    },
    colon: {
      type: Boolean,
      default: true
    },
    bordered: {
      type: Boolean,
      default: false
    }
  }
})
</script>
